<!-- 品牌监控 下钻页 -->
<template>
    <div class="zs-table-page-container">
        <div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
            <span>
                <el-select v-model="curType" class="zs-select-md zs-space-right-sm" placeholder="合同标签" clearable>
                    <el-option v-for="item in dictObj.CW_HZYT" :key="item.dictValue" :label="item.dictLabel"
                        :value="item.dictValue" />
                </el-select>
                <el-date-picker class="zs-select-md zs-space-right-sm" v-model="yearmonth" type="month" placeholder="日期"
                    :clearable="false" value-format="YYYY-MM" disabled/>
                <el-button class="zs-btn-plain" @click="getUrl">查询</el-button>
            </span>
            <span class="zs-layout-flex-row">
                <el-button class="zs-btn-plain" disabled>
                    <el-icon class="el-icon--left">
                        <Download />
                    </el-icon>导入
                </el-button>
                <el-button class="zs-btn-plain" disabled>
                    <el-icon class="el-icon--left">
                        <Upload />
                    </el-icon>导出
                </el-button>
            </span>
        </div>
        <div class="zs-card zs-table-page-content" v-loading="isLoading">
            <iframe class="iframe" :src="iframeUrl" @load="iframeLoaded"></iframe>
        </div>
    </div>
</template>
  
<script setup lang="jsx">
import { ref } from 'vue';
import { useRoute } from "vue-router";
import { useStore } from "vuex"
let store = useStore()
const route = useRoute()
const { url } = route.query
let dictObj = store.getters.getDictObj(['CW_HZYT'])
let curType = ref(dictObj.CW_HZYT[0].dictValue)
let yearmonth = ref('2024-09')
let iframeUrl = ref(`${url}/${curType.value}/${yearmonth.value}.html`)
const getUrl = () => {
    isLoading.value = true
    iframeUrl.value = `${url}/${curType.value}/${yearmonth.value}.html`
}

const isLoading = ref(true)
const iframeLoaded = (event) => {
    console.log('iframe加载完成', event);
    isLoading.value = false
}

</script>
  
<style scoped lang="scss">
.iframe {
    height: 100%;
    width: 100%;
    border: none;
}
</style>